<!doctype html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<%@ include file="/commons/basejs.jsp" %>
<link rel="stylesheet" href="/static/miind/css/common.css">
<link rel="stylesheet" href="/static/miind/css/brand.css">
<link rel="stylesheet" href="/static/miind/css/products.css">
<link rel="stylesheet" href="${staticPath }/static/miind/css/jquery-labelauty.css">
<script type="text/javascript" src="${staticPath }/static/miind/script/underscore-min.js"></script>


<div id="page" class="page-min-width page-with-header" style="display: block;">
    <div id="header" style="left: 0;">
        <div class="wrapper" style="width: 1244px;">
            <div class="menu-bar">
                <div class="left-part">
                    <a id="miiiind" href="/"></a>
                </div>
                <form id="search_form" method="" action="" class="searching-unit">
                    <input id="query" type="text" size="27" name="manName" placeholder="搜索你喜欢的">
                    <a href="#" onclick="craftsmanSearchProFun()" class="go"></a>
                </form>
                <div class="search-hint">

                </div>
            </div>
        </div>
    </div>
    <div class="wrapper" style="width: 1244px;">
        <div id="board_card">
    		<c:if test="${not empty craftsman.manBrand }">
	            <div class="inner">
	                <div class="head-line">
	                    <div class="board-name">
	                        <span>${craftsman.manBrand }</span>
	                    </div>
	                    <div class="board-category">
	                         <span>${craftsman.manBrandinfo }</span>
	                    </div>
	                </div>
	            </div>
            </c:if>
            <c:if test="${not empty tagname}">
                  <div class="inner">
	                <div class="head-line">
	                    <div class="board-name">
	                        <span>${tagname}：</span>
	                    </div>
	                    <div class="board-category">
	                         <span>${tagnum}</span>
	                    </div>
	                </div>
	            </div>
	        </c:if>
            <c:if test="${not empty craftsman.manBrand }">
            <div class="bar">
                <a href="" class="user-unit x">
                    <img src="/static/miind/images/brand1.jpg" alt="">
                    <span class="name">当下视觉</span>
                </a>
                <div class="sl-ext">
                    <a href="javascript:;" class="sl-e-more J_extMore" style="visibility: visible">
                        <i></i>
                    </a>
                </div>
				<div class="shaixuan">
                    <div class="yesorno">
                        <span>是否入围：</span>
                    </div>

                    <ul class="dowebok">
						<li><input type="radio" name="radio" data-labelauty="待选" onclick="changeselect('${craftsman.id}',0)" value="0" <c:if test="${empty craftsman.selected or craftsman.selected eq 0}">checked="checked"</c:if>></li>
                        <li><input type="radio" name="radio" data-labelauty="入围" onclick="changeselect('${craftsman.id}',1)" value="1" <c:if test="${craftsman.selected eq 1}">checked="checked"</c:if>></li>
                        <li><input type="radio" name="radio" data-labelauty="淘汰" onclick="changeselect('${craftsman.id}',2)" value="2" <c:if test="${craftsman.selected eq 2}">checked="checked"</c:if>></li>
                    </ul>
                </div>
            </div>
			<div class="inner two">
                <div class="half">
                    <div class="head-line">
                        <div class="board-name">
                            <span>姓名：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manName}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>电话：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manCellphone}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>邮箱：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manEmail}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>微信号：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manWeixin}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>推荐人/推荐机构：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.introducer}&nbsp;</span>
                        </div>
                    </div>
                </div>
                <div class="half">
                    <div class="head-line">
                        <div class="board-name">
                            <span>公司名称：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manCompany}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>品牌名称：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manBrand}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>宣传视频链接：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manCompanyvedio}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>官方网站：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manHaswebsite}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>官方微博：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manCompanyweibo}&nbsp;</span>
                        </div>
                    </div>
                    <div class="head-line">
                        <div class="board-name">
                            <span>微信公众号：</span>
                        </div>
                        <div class="board-category">
                            <span>${craftsman.manCompanyweixin}&nbsp;</span>
                        </div>
                    </div>
                </div>
            </div>
      	 </c:if>
        </div>
        <div class="waterfall">
        	<c:forEach items="${prolist}" var="productVO">
	        	<div class="grid">
	                <a href="javascript:void(0);" target="_self" rel class="img x layer-view loaded" onclick="show('${productVO.id}')">
	                    <img src="${productVO.manCover }" alt="" />
	                </a>
	                <p>产品名称：${productVO.manName }</p>
	                <p>库存：${productVO.manNum }</p>
	                <p>零售价：￥${productVO.manPrice }</p>
	            </div>
        	</c:forEach>
        </div>
    </div>
    <div id="pin_view_layer" style="display: none;">
        <div class="close-layer">
            <i onclick="closeDiv()"></i>
        </div>
        <div class="pin-view">
            <div style="overflow: hidden;width: 1014px;margin-bottom: 12px;"></div>
            <div class="pin-view-wrapper">
                <div class="main-part">
                    <div class="image-piece piece">
                        <div class="tool-bar">
                            <p><i id='pro_name'></i></p>
                        </div>
                        <div class="main-image">
                            <div id="baidu_image_holder" class="image-holder">
                                <img src="" alt="balalala">
                            </div>
                        </div>
                        <div class="tool-bar-bottom">
                            <p>库存：<i id='pro_num'></i></p>
                            <p>零售价：￥<i id='pro_price'></i></p>
                        </div>
                    </div>
                    <div class="extra-box">
                    </div>
                </div>
            </div>
        </div>
        <div class="pin-view-arrows">
        
        </div>
    </div>
</div>
<div class="clear"></div>
<script type="text/javascript" src="${staticPath }/static/miind/script/jquery-labelauty.js"></script>
<script>
    $(function(){
        $(':input').labelauty();
    });
</script>
<script type="text/javascript">
	function changeselect(id,selectvalue){
		$.ajax({
			type : 'POST',
			dataType : "json",
			data : {
				id : id,
				selectvalue : selectvalue
			},
			url : "${path}/miiiind/changeselect",
			success : function(data) { //请求成功后处理函数。 
				if(!data.success){
					alert("标签设置失败。");
				}
			}
		});
	}
    function show(id){
    	 document.getElementById("pin_view_layer").style.display = "block" ;
         //document.getElementById("hsDiv").style.display = "block" ;
    	//提交数据
		$.ajax({
			type : 'POST',
			dataType : "json",
			data : {
				id : id
			},
			url : "${path}/miiiind/getProductInfo",
			success : function(data) { //请求成功后处理函数。    
				$("#pro_name").html(data.product.manName);
				$("#pro_price").html(data.product.manPrice);
				$("#pro_num").html(data.product.manNum);
				$("#pro_num").html(data.product.manNum);
				$("#baidu_image_holder img").attr('src',data.product.manCover); 
				$(".extra-box").empty();
				 $.each(data.productList,function(i,temp){   
                     var item ='<img src="'+temp.manImg+'" alt="balalala" style="visibility: visible;" class="next x layer-view">';  
                     $(".extra-box").append(item+'<br>');  
                 });
			}
		});
       
    }
    function closeDiv(){
        document.getElementById("pin_view_layer").style.display = "none" ;
       // document.getElementById("hsDiv").style.display = "none" ;
    }
    window.onload = function(){
        //每个格格不一定往自己序号%5这个列插入，看哪个列目前最矮，插在哪里=
        //得到所有的grid
        $grids = $(".grid");
        //用一个数组存储当前五个列的总高度
        var colHeight = [0,0,0,0,0];
        // console.log(colHeight);
        // 遍历小格格
        $grids.each(function(){
            //找一下当前的最短列是谁
            var minValue = _.min(colHeight); //colHeight里面的最小的值！
            //看一下最短列出现在index几的位置上
            var minIndex = _.indexOf(colHeight,minValue);//最短的值的下标
            // console.log(minIndex);
            $(this).css({
                "top" : minValue ,
                "left" : minIndex * 252
            });
            colHeight[minIndex] += $(this).outerHeight() + 20;
            // console.log(colHeight[minIndex]);
        })
    }
    
    function craftsmanSearchProFun(){
    	var descr=$("#query").val();
    	window.location.href="${path}/miiiind/brand?descr="+descr;
    }
</script>
